<!-- 个人发布的 -->
<template>
	<view class="personage">
		<u-tabs class="order-box-t" activeStyle="color: #E27C8A;fontSize: 32rpx" lineHeight="6" lineColor="#E27C8A"
			inactiveStyle="color: #0F0D21;fontSize: 32rpx" :list="tabsListData" @change="handleSearch"></u-tabs>

		<view class="listBox" v-for="(res,index) in pageData" :key="index">
			<ListItem :tabsList="tabsList" :data="res"></ListItem>
		</view>

		<uni-load-more v-if="pageData.length>0" :status="status"></uni-load-more>
		<noData :meStatus="true" v-else></noData>
	</view>
</template>

<script>
	//页面组件
	import ListItem from './components/list-Item.vue'

	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'

	export default {
		components: {
			ListItem
		},
		props: {
			/**
			 * 个人的数据
			 */
			data: {
				type: Array,
				default: () => []
			},

			/**
			 * 上拉加载更多
			 */
			status: {
				type: String,
				default: 'loading'
			},

			/**
			 * 修改tabs
			 */
			switchTabs: {
				type: Function,
				default: () => {}

			}
		},
		data() {
			return {
				pageData: [],

				tabsList: [], // 项目的数据
				tabsListData: [{
						name: '全部',
						value: null
					},
					{
						name: '待支付',
						value: 0
					},
					{
						name: '进行中',
						value: 1
					},
					{
						name: '已完成',
						value: 2
					},
					{
						name: '取消',
						value: 3
					},

				], // tabs数据状态：0-待支付，1-正常，2-已完成，3-取消
			};
		},

		computed: {
			...mapState({
				classifyData: state => state.home.classifyData
			})
		},



		watch: {
			data: {
				handler() {
					let arr = [...this.data]

					if (this.data.length > 0) {
						arr = this.data.map(res => ({
							// 没有返回头像/发起人/标题/结束时间
							headImg: res.avatarUrl, // 头像
							name: res.nickName, // 发起人
							// title: '活动标题吧啦一天吧最多最多展活动标题吧啦1天吧最多最多展~', // 标题
							// endTime: '2023-06-08 17:00:00', // 结束时间

							id: res.id,
							artistApplicantStatus: res.artistApplicantStatus, // 艺人是否报名过了
							phone: res.phone, // 电话

							type: res.type, // 项目类型
							startTime: res.startTime, // 开始时间

							commissionAmount: res.commissionAmount, // 佣金
							address: res.address, // 地点
							quota: res.quota, // 需要人数
							applyNum: res.applicantList.length, // 申请人数量

							applyChild: [...res.applicantList], // 申请人头像

							remark: res.remark, // 备注
							
							status: res.status, // 订单类型
							
							
							payType: res.payType, // 支付类型

							data: {
								...res
							} // 其他数据

						}))
					}

					this.pageData = [...arr]

				},
				deep: true,
				immediate: true
			}
		},

		created() {
			this.init()
		},


		methods: {
			...mapActions('home', ['getCate']),

			/**
			 * 初始化
			 */
			init() {
				this.setUnitInit()
			},

			/**
			 * 初始化单位
			 */
			async setUnitInit() {
				// 获取分类数据
				let arr = await this.getCate()
				this.tabsList = arr.map(res => ({
					name: res.title,
					value: res.id,
					data: {
						...res
					}
				}))


			},


			/**
			 * 寻找type
			 */
			recursion(val, id) {
				let str = {}

				val.map(res => {
					if (res.id === id) {
						str = {
							title: res.title,
							unit: res.res.title
						}
					} else {
						res.cateList.map(res2 => {
							if (res2.id === id) {
								str = {
									title: res2.title,
									unit: res2.unit
								}
							}
						})
					}
				})

				return str;
			},


			handleSearch(val) {
				this.$emit('switchTabs', val)
			}



		}
	}
</script>

<style lang="less" scoped>
	page{
		background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215, 0.2) 100%);
	}
	.personage {
		#padding(0 0 24rpx 0);
		


		.listBox {
			margin: 24rpx;
		}

	}
</style>